<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-3.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8" />
		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>new_file</title>
		<meta name="description" content="" />
	</head>
	
	<body>
		
		<div th:fragment="head">
			<!-- sequence -->
			<!--
			<link rel="stylesheet" href="assets/css/docs.css"  th:attrprepend="href=${urlRelativePath}"/>
			-->
			<link rel="stylesheet" href="assets/css/bootstrap.css"  th:attrprepend="href=${urlRelativePath}"/>
			<style>
			body{
				background: url('images/wood_pattern.png');
				padding-top: 60px;
        		padding-bottom: 40px;
			}
			#myContainer{
				background: white;
			}
			#myRow{
				padding-top:20px;
				padding-left:40px;
				padding-right:40px;
			}
			</style>
			<link rel="stylesheet" href="assets/css/bootstrap-responsive.css"  th:attrprepend="href=${urlRelativePath}"/>
			<script src="assets/js/jquery.js" th:attrprepend="src=${urlRelativePath}"></script>
		    <script src="assets/js/bootstrap-dropdown.js" th:attrprepend="src=${urlRelativePath}"></script>
			<script src="assets/js/bootstrap-collapse.js" th:attrprepend="src=${urlRelativePath}"></script>
			<script src="assets/js/bootstrap-carousel.js"></script>
			<script src="assets/js/bootstrap-transition.js"></script>
			<script src="assets/js/bootstrap-alert.js"></script>
			<script type="text/javascript">
			//<![CDATA[
				$(document).ready(function(){
					$("li").removeClass('active');
					var strhref = window.location.href.substring(21)
					// var strLength = strhref.split("/").length
					
					if($("[href='"+strhref+"']").length){
						$("[href='"+strhref+"']").parent().addClass("active");
					}else{
						var arr = strhref.split("/")
						strhref = arr[2]
						$("a[href*='"+strhref+"']").parent().addClass('active');
					}
					
					
					//change style's href
					// var prefix = ""
					// for(var i=3;i<strLength;i++){
						// prefix = "../"+prefix
					  // }
					// $("[rel='stylesheet']").each(function() {
					  // var strStyle = prefix+$(this).attr("href")
// 					  
					  // $(this).attr("href",strStyle)
					// });
					
				})
			//]]>
			</script>
		</div>
		
		<div th:fragment="copy">
			<div class="navbar navbar-fixed-top">
			<div class="navbar-inner">
				<div class="container">
					<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
			          <span class="icon-bar"></span>
			          <span class="icon-bar"></span>
			          <span class="icon-bar"></span>
			        </a>
			        
					<h2><a class="brand" th:href="@{/vinapage}">Vina's home</a></h2>	
					
					<div class="nav-collapse">
					<ul class="nav">
						<li ><a href="home.html" th:href="@{/vinapage}">Home</a></li>
						<li ><a href="blog/list.html" th:href="@{/blog/list}">Blog</a></li>
						<li ><a href="about.html" th:href="@{/about}">About</a></li>

					</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	</body>
</html>